import { FLEX_STYLE_PROPS_DATA } from "@mantine/core";
import { FlexDemos } from "@/lib/@docs/demos/src";
import { StylePropsTable } from "@/components/StylePropsTable";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.Flex);

## Usage

<Demo data={FlexDemos.configurator} />

## Supported props

<StylePropsTable source={FLEX_STYLE_PROPS_DATA} />

## Responsive props

`Flex` component props can have responsive values the same way as other [style props](/styles/style-props/):

<Demo data={FlexDemos.responsive} />

## Difference from Group and Stack

`Flex` component is an alternative to [Group](/core/group/) and [Stack](/core/stack/).
`Flex` is more flexible, it allows creating both horizontal and vertical flexbox layouts, but requires more configuration.
Unlike [Group](/core/group/) and [Stack](/core/stack/) `Flex` is [polymorphic](/guides/polymorphic/) and supports responsive props.

<DataTable
  head={["", "Group", "Stack", "Flex"]}
  data={[
    ["Direction", "horizontal", "vertical", "both"],
    ["Equal width children", "✅", "❌", "❌"],
    ["flex-wrap support", "✅", "❌", "✅"],
    ["Responsive flexbox props", "❌", "❌", "✅"],
    ["Polymorphic component", "❌", "❌", "✅"],
  ]}
/>

<FlexboxGapSupport component="Flex" />
